<template>
  <div id="container">
    <!-- 表单 -->
    <div id="BD">
      <div id="BDIpt">
        <el-input v-model="userName" placeholder="请输入用户名" />
        <el-button plain class="loginBtn" @click="loginHanle">登录</el-button>
      </div>
      <div id="info">author:maohe101@163.com</div>
    </div>
  </div>
</template>
   
<script setup>
import { ref, inject } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useUserStore } from '../src/stores/user';

let userStore = useUserStore();

let BASEURL = inject("apiBaseUrl");

// 用户名
let userName = ref("");

// 登录按钮触发
async function loginHanle() {

  if (userName.value == "") {
    ElMessage("输入不能为空!");
    return;
  }

  const res = await axios.get(`${BASEURL}/users/getInfoByName/${userName.value}`);
  if (res.data.code == 0) {
    ElMessage("此用户未录入!")
    return;
  }

  // 存储pinia，页面跳转
  // userStore.setUserInfo(res.data.data);
  window.localStorage.setItem("uid", res.data.data.uid)
  window.location.href = "/"
}

</script>
   
<style scoped>
#BDIpt {
  width: 400px;
  display: flex;
  position: relative;
  bottom: 50px;
}

.loginBtn {
  margin-left: 5px;
}

#info {
  position: relative;
  bottom: 45px;
  left: 140px;
  font-size: 14px;
  color: #959595;
}

#container {
  background: url("../public//loginBK.webp") no-repeat center center;
  background-size: cover;
  height: 97vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 0px 7px black;
}

body {
  overflow: hidden;
}
</style>